<template>
  <el-date-picker
      v-model="value"
      style="width: 100%"
      :disabled="disabled"
      :teleported="false"
      :clearable="!field.not_null"
      :type="info.type"
      :value-format="info.format"
  />
</template>

<script setup lang="ts">
import {computed} from "vue";
import type {MetaField} from "../../../types/tool/meta.types.ts";
import type {DaoTypes} from "../../../types/tool/dao.types.ts";

const props = defineProps<{
  modelValue: any,
  disabled: boolean,
  db: DaoTypes,
  field: MetaField
}>();
const emits = defineEmits(['update:modelValue'])
const value = computed({
  get: () => props.modelValue,
  set: (v) => emits('update:modelValue', v)
})

const info = computed(() => {
  const domain = props.field.domain
  const type = domain === 'DateTimeField' ? 'datetime' : 'date'
  const format = domain === 'DateTimeField' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
  return {type, format}
})


</script>

<style scoped>

</style>